<template>
    <div>
       <div class="box">
        <router-link to="/homepage" slot="left">
        <mt-button icon="back">返回</mt-button>
        </router-link>
        <van-search
          style="widht:80%;"
          slot="center"
          show-action
          placeholder="请输入搜索关键词"
          v-model="val"
          @keyup.enter="search"
          >
          <template #action>
           <div @click="search">搜索</div>
          </template>
          </van-search>
          </div>
          <keepAlive>
          <div class="db">
              <h4>历史搜索</h4>
              <van-icon name="delete-o"  @click="remove"/>
              <span v-for="(value,index) in data" :key="index">{{value.keyWord}}</span>
          </div>
          </keepAlive>
    </div>
</template>

<script>
    export default {    
        data() {
            return {
                val: '',
                data:'',
            }
        },
        methods: {
            hiscosearch(){
                console.log(this.value)
            },
            // 搜索
            search(){
                if(this.val != ''){
                if(this.$route.path != '/menuquery/'+this.val){
                this.$router.push('/menuquery/'+this.val);
               } 
              } 
            },
            //历史搜索
            historySearch(){
              let url = '/search/historySearch/' + JSON.parse(sessionStorage.getItem('user')).id
              this.axios.get(url).then((res) => {
                console.log(res.data.list)
                this.data = res.data.list
              })
            },
            //删除历史记录
            remove(){
                 let url = '/search/empty/'+JSON.parse(sessionStorage.getItem('user')).id
                 this.axios.get(url).then((res) => {
                    console.log(res)
                 })
            }
        },
        mounted () {
            this.historySearch()
        },
    }
</script>

<style lang="scss" scoped>
  .box{
      display: flex;
      margin-top: 1vh;
      height: 20vw;
      border-bottom: 1px solid #ccc;
      .mint-button{
          width: 20vw;
          background-color: white;
          margin-top: 4.5vw;
          font-size: 12px;
          border-color: white;
      }
      
  }
  .db{
          padding: 5vw;
          h4{
              display: inline-block;
              margin-right:65vw;
          }
          span{
              display: inline-block;
              margin: 0 5vw 2vw 0;
              padding: 3vw;
              font-size: 12px;
              background-color: #e8e8e8;
              border-radius: 8px;
          }
      }
</style>